<template>
	<view class="data-con w-100 ss-flex justify-between flex-wrap ss-p-x-20 ss-m-t-20">
		<view class="item-data ss-r-20 ss-r-b-20 bg-white ss-m-b-15" v-for="(item,index) in state.list" :key="index"
			@click="ondetails(item)">
			<image class="ss-r-t-20" :src="item.image" mode="aspectFill" />
			<view class="item-info ss-p-12">
				<view class="item-name ss-line-1 ss-font-32 ">
					{{ item.title }}
				</view>
				<!-- item-exp -->
				<view class="item-exp ss-flex justify-start ss-m-t-8">
					<view class="item-exp-right ss-flex justify-start ss-m-t-4">
						<view
							:class="['item-exp-right-item  ss-p-r-12 ss-m-r-12',page === item.tags.length - 1 && 'item-exp-last']"
							v-for="(value,page) in item.tags" :key="page">{{ value }}
						</view>
					</view>
				</view>
				<view class="item-price ss-flex justify-start align-end ss-m-t-12">
					<view class="ss-font-32 symbol price text-bold">￥</view>
					<view class="ss-font-40 price-text price text-bold">
						{{ parseFloat(Number(item.price[0]).toFixed(2)) }}</view>
					<view class="ss-font-20 origin ss-m-l-4">起</view>
				</view>
			</view>
		</view>
	</view>
	<uni-load-more v-if="state.total > 0" :content-text="{
        contentdown: '上拉加载更多',
      }" :status="state.loadStatus" @tap="loadmore" />
</template>

<script setup>
	import {
		onMounted,
		reactive,
	} from 'vue';
	import {
		onReachBottom,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const props = defineProps({
		params: {
			type: Object,
			default: () => ({
				hot: 1,
				begin_date: '',
				end_date: '',
				area: '',
				sort: '',
				longitude: '',
				latitude: ''
			}),
		},
	});
	const state = reactive({
		page: 1,
		list: [],
		total: 0,
		loadStatus: '',
	});

	onMounted(() => {
		// 请求商品数据
		getData();
	});

	onReachBottom(() => {
		loadmore();
	});

	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++;
			getData();
		}
	};

	const getData = async () => {
		state.loadStatus = 'loading';
		const res = await sheep.$api.goods.hotelData({
			page: state.page,
			hot: 1,
			list_rows:20,
			...props.params,
		});
		if (res.error === 0) {
			res.data.data  = res.data.data.map(item => {
				item.tags = item.tags.slice(0,3)
				return item
			})
			state.list = state.list.concat(res.data.data);
			state.total = res.data.total;
			if (res.data.current_page < res.data.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	};

	const ondetails = (item) => {
		sheep.$router.go('/pagesChlid/hotel_details', {
			id: item.id,
			begin_date: props.params.begin_date.replace(/\//g, '-'),
			end_date: props.params.end_date.replace(/\//g, '-'),
		});
	};
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.data-con {
		.item-data {
			width: 344rpx;

			image {
				width: 100%;
				height: 344rpx;
			}

			.item-name {
				color: #3D3D3D;
			}

			.item-exp-right-item {
				font-size: 16rpx;
				font-family: Source Han Sans;
				font-weight: 350;
				color: #3D3D3D;
				border-right: 2rpx solid #3D3D3D;
			}

			.item-exp-last {
				padding: 0 !important;
				border: none !important;
				margin: 0 !important;
			}

		}
	}

	.price {
		color: #F83D3D;
	}

	.symbol {
		height: 52rpx;
		line-height: 58rpx;
	}


	.price-text {
		height: 52rpx;
		line-height: 52rpx;
	}

	.origin {
		height: 52rpx;
		line-height: 62rpx;
		color: #979797;
	}
</style>